import React, { useEffect, useState } from 'react'
import './my.css'
import { Button, Overlay, Input, Form, Toast, Dialog  } from 'react-vant'
import { LabelO, BillO, BagO, LocationO, FlagO, UserO, Aim, WarnO, ServiceO, QuestionO, SmileCommentO, Arrow, Cross  } from '@react-vant/icons';
import { LOGIN } from '../../axios';
import { useNavigate } from 'react-router-dom';
export default function My() {
  let [ flag,setFlag ] = useState(false)
  
  const navigate = useNavigate()
  const src = ''
  const arr = [
    {
      id:'1',
      name:'我的订单',
      icon:<LabelO  />
    },
    {
      id:'2',
      name:'优惠卷',
      icon:<BillO  />
    },
    {
      id:'3',
      name:'礼品卡',
      icon:<BagO  />
    },
    {
      id:'4',
      name:'我的收藏',
      icon:<LocationO  />
    },
    {
      id:'5',
      name:'我的足迹',
      icon:<FlagO  />
    },
    {
      id:'6',
      name:'会员福利',
      icon:<UserO  />
    },
    {
      id:'7',
      name:'地址管理',
      icon:<Aim  />
    },
    {
      id:'8',
      name:'账号安全',
      icon:<WarnO  />
    },
    {
      id:'9',
      name:'联系客服',
      icon:<ServiceO  />
    },
    {
      id:'10',
      name:'帮助中心',
      icon:<QuestionO  />
    },
    {
      id:'11',
      name:'意见反馈',
      icon:<SmileCommentO  />
    },
  ]
  const open = () => {
    if(localStorage.getItem('username')){
      Dialog.confirm({
        title: '退出登录',
        message: '是否退出当前账号',
      })
        .then(() => {
          localStorage.removeItem('token')
          localStorage.removeItem('username')
          navigate(0)
        })
        .catch(() => {
          console.log('catch')
        })
    }else{
    setFlag(true)
    }
  }
  const [form] = Form.useForm()

  const onFinish = values => {
    console.log(values)
    LOGIN({...values}).then(res => {
      console.log(res);
      if(res.errmsg == "密码错误"){
          Toast.fail(res.errmsg)
      }else{
        setFlag(false)
        form.resetFields()
        Toast.success('登录成功')
        localStorage.setItem('token',res.data.data.token)
        localStorage.setItem('username',res.data.data.userInfo.username)
        localStorage.setItem('id',res.data.data.userInfo.id)
      }
    })
  }
  return (
    <div>
      <div className='my-top' onClick={open}>
        <div className='my-z'>
          <img src={src} alt="" />
          <span>{localStorage.getItem('username')?localStorage.getItem('username'):'点击登录'}</span>
        </div>
        <div className='my-y'>{localStorage.getItem('username') ? <Cross  /> : <Arrow  />}</div>
      </div>

    <ul className='my-ul'>
      {
        arr.map(item => {
          return <li key={item.id}>
            <p className='my-icon'>{item.icon}</p>
            <p className='my-name'>{item.name}</p>
          </li>
        })
      }
    </ul>

    <Overlay visible={flag} onClick={() => setFlag(false)}
        style={{
          height: '100%',
          display:flag? 'flex':'none',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
    <div className='home-form'>
      <Form
        form={form}
        onFinish={onFinish}
        footer={
          <div style={{ margin: '16px 16px 0' }}>
            <Button round nativeType='submit' type='primary' block>
              提交
            </Button>
          </div>
        }
      >
        <Form.Item
          className='form-item'
          rules={[{ required: true, message: '请填写用户名' }]}
          name='username'
          label='用户名'
        >
          <Input className='home-input' placeholder='请输入用户名' />
        </Form.Item>
        <Form.Item
          className='form-item'
          rules={[{ required: true, message: '请填写密码' }]}
          name='pwd'
          label='密码'
        >
          <Input className='home-input' placeholder='请输入密码' />
        </Form.Item>
      </Form>
      </div>
      </Overlay>

    </div>
  )
}
